<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .point{ width:10px;height:10px;border-radius: 50%;background: black;position: absolute;left:0;top:0; }
    </style>
</head>
<body>
    <span>0, 0</span>
</body>
<script>

    var oSpan = document.querySelector("span")

    // 鼠标在页面上的移动事件
    document.onmousemove = function(eve){
        // 获取事件对象
        var e = eve || window.event;
        // 获取坐标，并显示到指定容器
        oSpan.innerHTML = e.pageX + ", " + e.pageY;
        // 创建并插入元素，用于显示轨迹
        var div = document.createElement("div");
        document.body.appendChild(div);
        // 设置默认样式
        div.className = "point";
        // 设置鼠标的位置
        div.style.left = e.pageX + "px";
        div.style.top = e.pageY + "px";
    }
    
</script>
</html>